document.addEventListener('DOMContentLoaded', function () {
    const token = localStorage.getItem('token');
    console.log(token);
    let allCourses = []; // 用于存储所有课程数据

    // AJAX 请求获取课程数据
    $.ajax({
        type: 'POST',
        url: 'http://10.2.1.17:8099/EXOnline/font/courses?method=individualcoursequery',
        xhrFields: {
            withCredentials: true
        },
        headers: {
            'Authorization': 'Bearer ' + localStorage.getItem('token')
        },
        success: function (res) {
            console.log(res);
            allCourses = res.data; // 存储所有课程数据
            updateCourseList(allCourses); // 初始展示所有课程
        },
        error: function (error) {
            console.log(error);
        }
    });

    // 更新课程列表的函数
    function updateCourseList(courses) {
        const courseList = document.querySelector('#my-course .course-list');
        courseList.innerHTML = ''; // 清空当前内容

        if (courses.length > 0) {
            courses.forEach(course => {
                const courseCard = createCourseCard(course.cover, course.cname, course.cintroduce, '未开始学习', '学习时长：未知');
                courseList.appendChild(courseCard);
            });
        } else {
            const noCoursesMessage = document.createElement('p');
            noCoursesMessage.textContent = '没有可用的课程。';
            courseList.appendChild(noCoursesMessage);
        }
    }

    // 课程标签切换
    const courseTabs = document.querySelectorAll('.course-tabs .tab');
    courseTabs.forEach((tab) => {
        tab.addEventListener('click', function () {
            const tabType = this.textContent.trim();
            let filteredCourses = [];

            if (tabType === '全部') {
                filteredCourses = allCourses; // 展示所有课程
            } else if (tabType === '免费课') {
                filteredCourses = allCourses.filter(course => course.cprice == 0); // 展示价格为零的课程
            } else if (tabType === '实战课') {
                filteredCourses = allCourses.filter(course => course.cprice > 0); // 展示价格不为零的课程
            }

            updateCourseList(filteredCourses); // 更新课程列表
        });
    });

    // 创建课程卡片的函数
    function createCourseCard(imgSrc, title, desc, progress, studyTime) {
        const courseCard = document.createElement('div');
        courseCard.classList.add('course-card');

        const img = document.createElement('img');
        img.src = imgSrc;
        img.alt = '课程图片';

        const courseInfo = document.createElement('div');
        courseInfo.classList.add('course-info');

        const h3 = document.createElement('h3');
        h3.textContent = title;

        const pDesc = document.createElement('p');
        pDesc.classList.add('course-desc');
        pDesc.textContent = desc;

        const courseMeta = document.createElement('div');
        courseMeta.classList.add('course-meta');

        const progressDiv = document.createElement('div');
        progressDiv.classList.add('progress');
        progressDiv.textContent = progress;

        const studyTimeDiv = document.createElement('div');
        studyTimeDiv.classList.add('study-time');
        studyTimeDiv.textContent = studyTime;

        courseMeta.appendChild(progressDiv);
        courseMeta.appendChild(studyTimeDiv);
        courseInfo.appendChild(h3);
        courseInfo.appendChild(pDesc);
        courseCard.appendChild(img);
        courseCard.appendChild(courseInfo);
        courseCard.appendChild(courseMeta);

        return courseCard;
    }

    // 菜单切换
    const menuItems = document.querySelectorAll('.menu-list li');
    const tabContents = document.querySelectorAll('.tab-content');

    menuItems.forEach(item => {
        item.addEventListener('click', function () {
            // 移除所有active类
            menuItems.forEach(i => i.classList.remove('active'));
            tabContents.forEach(c => c.classList.remove('active'));

            // 添加active类到当前项
            this.classList.add('active');
            const tabId = this.getAttribute('data-tab');
            document.getElementById(tabId).classList.add('active');

            // 如果是订单中心，初始化显示全部订单
            if (tabId === 'orders') {
                updateOrderList('全部');
            }
        });
    });

    // 订单标签切换
    const orderTabs = document.querySelectorAll('#orders .order-tabs .tab');

    orderTabs.forEach((tab) => {
        tab.addEventListener('click', function () {
            // 移除所有标签的active类
            orderTabs.forEach(t => t.classList.remove('active'));

            // 添加active类到当前标签
            this.classList.add('active');

            // 更新订单列表内容
            updateOrderList(this.textContent.trim());
        });
    });

    // 更新订单列表的函数
    function updateOrderList(type) {
        const orderList = document.querySelector('#orders .order-list');
        orderList.innerHTML = ''; // 清空当前内容

        // 根据类型显示不同的订单内容
        switch (type) {
            case '全部':
                orderList.innerHTML = `
                    <div class="order-item">
                        <div class="order-header">
                            <span class="order-number">订单号：2024031501</span>
                            <span class="order-time">2024-03-15 14:30:00</span>
                        </div>
                        <div class="order-content">
                            <h3>《Vue.js项目实战》课程</h3>
                            <p class="order-price">¥299.00</p>
                            <span class="order-status status-completed">已完成</span>
                        </div>
                    </div>
                    <div class="order-item">
                        <div class="order-header">
                            <span class="order-number">订单号：2024031502</span>
                            <span class="order-time">2024-03-15 15:45:00</span>
                        </div>
                        <div class="order-content">
                            <h3>《Python数据分析》课程</h3>
                            <p class="order-price">¥399.00</p>
                            <span class="order-status status-unpaid">未支付</span>
                        </div>
                    </div>
                `;
                break;

            case '未支付':
                orderList.innerHTML = `
                    <div class="order-item">
                        <div class="order-header">
                            <span class="order-number">订单号：2024031502</span>
                            <span class="order-time">2024-03-15 15:45:00</span>
                        </div>
                        <div class="order-content">
                            <h3>《Python数据分析》课程</h3>
                            <p class="order-price">¥399.00</p>
                            <span class="order-status status-unpaid">未支付</span>
                        </div>
                    </div>
                `;
                break;

            case '已完成':
                orderList.innerHTML = `
                    <div class="order-item">
                        <div class="order-header">
                            <span class="order-number">订单号：2024031501</span>
                            <span class="order-time">2024-03-15 14:30:00</span>
                        </div>
                        <div class="order-content">
                            <h3>《Vue.js项目实战》课程</h3>
                            <p class="order-price">¥299.00</p>
                            <span class="order-status status-completed">已完成</span>
                        </div>
                    </div>
                `;
                break;
        }
    }

    // 从 AJAX 数据更新课程列表的函数
    function updateCourseListFromAjax(courses) {
        const courseList = document.querySelector('#my-course .course-list');
        courseList.innerHTML = ''; // 清空当前内容

        courses.forEach(course => {
            const courseCard = createCourseCard(course.cover, course.cname, course.cintroduce, '未开始学习', '学习时长：未知');
            courseList.appendChild(courseCard);
        });
    }


});